<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>hello!欢迎光临小蚊简介</title>
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/index.js"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<!--头部-->
		<div class="header">
			<ul class="con_box">
				<li><a href="javascript:;">个人资料</a></li>
				<li><a href="javascript:;">工作经验</a></li>
				<li><a href="javascript:;">相关技能</a></li>
				<li><a href="javascript:;">前端项目</a></li>
				<li><a href="javascript:;">PHP项目</a></li>
				<li><a href="javascript:;">联系方式</a></li>
				<li><a href="javascript:;">推荐好友</a></li>
			</ul>
		</div>
		
		<!--个人信息-->
		<div class="info">
			<!--个人图片-->
			<div class="img_box">
				<img src="img/tangxiaowen_font.png" alt="" class="top"/>
				<img src="img/tangxiaowen_img.jpg" alt="" class="master"/>
			</div>
			<!--资料-->
			<div class="info_box">
				<table>
					<tr>
						<td colspan="3"></td>
						<td>
							<div class="box">
							</div>
						</td>
					</tr>
					<tr>
						<td>性别：男</td>
						<td>出生：1991-11-17</td>
						<td>手机：151-9008-8570</td>
						<td>邮箱：846506584@qq.com</td>
					</tr>
					<tr>
						<td>学历：中专</td>
						<td>毕业：重庆市九龙职教中心</td>
						<td>户籍：贵州省松桃苗族自治县</td>
						<td>现居：观山湖区世纪城龙慈苑</td>
					</tr>
					<tr>
						<td>自我评价</td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="4">
							<p>本人性格低调、捎带小幼，待人热情、真诚、责任心较强。工作认真负责、积极主动、能吃苦耐劳。作为年轻的90后比较喜欢科技与新知，虽说职场还缺乏一定的经验，但我会用时间和汗水去弥补，希望能在贵阳找到一份工作，认识一批盆友。</p>
						</td>
					</tr>
				</table>
			</div>
		</div>
		
		<!--工作经验-->
		<div class="job">
			<p>工作经验</p>
			<table>
				<tr>
					<td class="left">工作时间：</td>
					<td>2016.5-2017.2</td>
				</tr>
				<tr>
					<td class="left">公司名称：</td>
					<td>上海海易科技网络有限公司</td>
				</tr>
				<tr>
					<td class="left">工作内容：</td>
					<td>1、根据公司业务需求编写PHP后台功能模块或WEB前端页面。</td>
				</tr>
				<tr>
					<td class="left"></td>
					<td>2、根据客户需求搭建web网站，修改站点页面，添加网站资料。</td>
				</tr>
			</table>
		</div>
		
		<!--相关技能-->
		<div class="skill">
			<p>相关技能</p>
			<table>
				<tr>
					<td class="left css3mover1">
						<a href="javascript:;" style="width:0%;"><span>Html Css 80%</span></a>
					</td>
					<td class="right">熟练掌握PHP研发语言和熟练掌握MySQL数据库</td>
				</tr>
				<tr>
					<td class="left css3mover2">
						<a href="javascript:;" style="width:0%;"><span>Html5 Css3 55%</span></a>
					</td>
					<td>熟练使用OOP理念、熟悉MVC框架、代码结构清晰</td>
				</tr>
				<tr>
					<td class="left css3mover3">
						<a href="javascript:;" style="width:0%;"><span>JavaScript jQuery 70%</span></a>
					</td>
					<td>熟悉Think框架、熟练Hdphp框架</td>
				</tr>
				<tr>
					<td class="left css3mover4">
						<a href="javascript:;" style="width:0%;"><span>Php 75%</span></a>
					</td>
					<td>熟练掌握HTML、CSS、jQuery、Ajax</td>
				</tr>
				<tr>
					<td class="left css3mover5">
						<a href="javascript:;" style="width:0%;"><span>MySql 75%</span></a>
					</td>
					<td>对于HTML5、CSS3、AngularJS、Linux有一定了解</td>
				</tr>
				<tr>
					<td class="left css3mover6">
						<a href="javascript:;" style="width:0%;"><span>Linux 50%</span></a>
					</td>
					<td>喜欢科技与新知，有一定的自学能力</td>
				</tr>
				<tr>
					<td class="left css3mover7">
						<a href="javascript:;" style="width:0%;"><span>AngularJS 50%</span></a>
					</td>
					<td></td>
				</tr>
			</table>
		</div>
		
		<!--前端项目-->
		<div class="web">
			<p>前端项目</p>
			<ul>
				<li>
					<a href="http://tangxiaowen.com/fanke/fanke.html" class="show">
						<p>小型商城静态页面</p>
						<img src="img/fanke.jpg" alt="" />
					</a>
					<a href="http://tangxiaowen.com/fanke/fanke.html" class="hide">
						<p class="title">小型商城静态页面</p>
						<p class="p_con">前端效果不做介绍</p>
					</a>
				</li>
				<li>
					<a href="http://tangxiaowen.com/jingdong/jingdong.html" class="show">
						<p>大型商城静态页面</p>
						<img src="img/jd.jpg" alt="" />
					</a>
					<a href="http://tangxiaowen.com/jingdong/jingdong.html" class="hide">
						<p class="title">小型商城静态页面</p>
						<p class="p_con">前端效果不做介绍</p>
					</a>
				</li>
				<li>
					<a href="javascript:;" class="show">
						<p>移动端 扫码预览</p>
						<img src="img/hao123.jpg" alt="" />
					</a>
					<a href="javascript:;" class="hide">
						<p class="title">小型商城静态页面</p>
						<p class="p_con">前端效果不做介绍</p>
					</a>
				</li>
				<li>
					<a href="javascript:;" class="show">
						<p>H5场景 扫码预览</p>
						<img src="img/wcj.jpg" alt="" />
					</a>
					<a href="javascript:;" class="hide">
						<p class="title">小型商城静态页面</p>
						<p class="p_con">前端效果不做介绍</p>
					</a>
				</li>
			</ul>
		</div>
		
		<!--PHP项目-->
		<div class="backstage">
			<p>PHP项目</p>
			<ul>
				<li>
					<a href="http://tangxiaowen.com/lianxiang/" class="show">
						<p>HD2.0编写的中型商城</p>
						<img src="img/lianxiang.jpg" alt="" />
					</a>
					<a href="http://tangxiaowen.com/lianxiang/" class="hide">
						<p class="title">HD2.0编写的中型商城</p>
						<p>使用技能：html、css、bootstrap、jquery、ajax、php、mysql</p>
						<p>前台功能：用户注册登陆、商品预览、挑选、购买、结算，收货地址增删改，个人中心个人资料编辑、订单商品信息详情。</p>
						<p>后台功能：管理员对商品品牌、商品分类、商品信息等的增删改，用户购买商品的实时更新及订单状态处理。</p>
					</a>
				</li>
				<li>
					<a href="http://tangxiaowen.com/newBlog/" class="show">
						<p>TP3.2编写的个人博客</p>
						<img src="img/blog.jpg" alt="" />
					</a>
					<a href="http://tangxiaowen.com/newBlog/" class="hide">
						<p class="title">TP3.2编写的个人博客</p>
						<p>使用技能：html、css/css3、bootstrap、jquery、ajax、php、mysql、ER图设计、数据缓存 、QQ登陆、文章评论、天气接口的调用。</p>
						<p>前台功能：游客访问，挑选分类/标签/文章，预览文章，文章点赞，文章评论，QQ登陆。</p>
						<p>后台功能：理员对文章、分类、标签的增删改。</p>
					</a>
				</li>
				<li>
					<a href="http://tangxiaowen.com/myssage/index.php" class="show">
						<p>PHP小功能--留言板</p>
						<img src="img/message.jpg" alt="" />
					</a>
					<a href="http://tangxiaowen.com/myssage/index.php" class="hide">
						<p class="title">PHP小功能--留言板</p>
						<p>使用技能：html、css、ajax、php</p>
						<p>前台功能：留言板、留言数据Execl数据导出</p>
					</a>
				</li>
				<li>
					<a href="http://tangxiaowen.com/qqMailHtml/index.html" class="show">
						<p>PHP小功能--发送QQ邮件</p>
						<img src="img/qqmail.jpg" alt="" />
					</a>
					<a href="http://tangxiaowen.com/qqMailHtml/index.html" class="hide">
						<p class="title">PHP小功能--发送QQ邮件</p>
						<p>使用技能：Php、html、css</p>
						<p>前台功能：发送QQ邮件</p>
					</a>
				</li>
			</ul>
		</div>
		
		<!--联系方式-->
		<div class="contact">
			<p>联系方式</p>
			<ul>
				<li class="map">
				<style type="text/css">
				    html,body{margin:0;padding:0;}
				    .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
				    .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
				</style>
				<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
				
				  <!--百度地图容器-->
				  <div style="width:690px;height:220px;border:#ccc solid 1px;" id="dituContent"></div>
				<script type="text/javascript">
				    //创建和初始化地图函数：
				    function initMap(){
				        createMap();//创建地图
				        setMapEvent();//设置地图事件
				        addMapControl();//向地图添加控件
				        addMarker();//向地图中添加marker
				    }
				    
				    //创建地图函数：
				    function createMap(){
				        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
				        var point = new BMap.Point(106.656651,26.611708);//定义一个中心点坐标
				        map.centerAndZoom(point,14);//设定地图的中心点和坐标并将地图显示在地图容器中
				        window.map = map;//将map变量存储在全局
				    }
				    
				    //地图事件设置函数：
				    function setMapEvent(){
				        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
				        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
				        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
				        map.enableKeyboard();//启用键盘上下左右键移动地图
				    }
				    
				    //地图控件添加函数：
				    function addMapControl(){
				        //向地图中添加缩放控件
					var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
					map.addControl(ctrl_nav);
				        //向地图中添加缩略图控件
					var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
					map.addControl(ctrl_ove);
				        //向地图中添加比例尺控件
					var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
					map.addControl(ctrl_sca);
				    }
				    
				    //标注点数组
				    var markerArr = [{title:"地址：观山湖区世纪城龙慈苑",content:"姓名：唐晓文<br/>电话：151-9008-8570<br/>邮箱：846506584@qq.com",point:"106.644722|26.604989",isOpen:1,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
						 ];
				    //创建marker
				    function addMarker(){
				        for(var i=0;i<markerArr.length;i++){
				            var json = markerArr[i];
				            var p0 = json.point.split("|")[0];
				            var p1 = json.point.split("|")[1];
				            var point = new BMap.Point(p0,p1);
							var iconImg = createIcon(json.icon);
				            var marker = new BMap.Marker(point,{icon:iconImg});
							var iw = createInfoWindow(i);
							var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
							marker.setLabel(label);
				            map.addOverlay(marker);
				            label.setStyle({
				                        borderColor:"#808080",
				                        color:"#333",
				                        cursor:"pointer"
				            });
							
							(function(){
								var index = i;
								var _iw = createInfoWindow(i);
								var _marker = marker;
								_marker.addEventListener("click",function(){
								    this.openInfoWindow(_iw);
							    });
							    _iw.addEventListener("open",function(){
								    _marker.getLabel().hide();
							    })
							    _iw.addEventListener("close",function(){
								    _marker.getLabel().show();
							    })
								label.addEventListener("click",function(){
								    _marker.openInfoWindow(_iw);
							    })
								if(!!json.isOpen){
									label.hide();
									_marker.openInfoWindow(_iw);
								}
							})()
				        }
				    }
				    //创建InfoWindow
				    function createInfoWindow(i){
				        var json = markerArr[i];
				        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
				        return iw;
				    }
				    //创建一个Icon
				    function createIcon(json){
				        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
				        return icon;
				    }
				    
				    initMap();//创建和初始化地图
				</script>
				</li>
				<li>
					<a href="">
						<p>扫二维码加QQ好友</p>
						<img src="img/qq.jpg" alt="" />
					</a>
				</li>
				<li>
					<a href="">
						<p>扫二维码加微信好友</p>
						<img src="img/weixin.jpg" alt="" />
					</a>
				</li>
			</ul>
		</div>
		
		<!--附件区QQ联系-->
		<div class="qq">
			<a href="http://wpa.qq.com/msgrd?v=1&amp;uin=846506584&amp;site=http://www.loai.cn&amp;menu=yes"><img src="img/qqbag.gif" alt="" title="联系我"></a>
		</div>
		
		<!--推荐好友-->
		<div class="master">
			<p>推荐好友</p>
			<ul>
				<li>
					<a href="http://c71_lidongxing.houdunphp.com/">
						<img src="img/master/ldx.jpg" alt="" />
					</a>
					<p>李东兴</p>
				</li>
				<li>
					<a href="http://c71_shengquan.houdunphp.com/">
						<img src="img/master/ysq.jpg" alt="" />
					</a>
					<p>杨胜全</p>
				</li>
				<li>
					<a href="http://c71_quzhigao.houdunphp.com/">
						<img src="img/master/qzg.jpg" alt="" />
					</a>
					<p>曲志高</p>
				</li>
				<li>
					<a href="http://c71_yulinfeng.houdunphp.com/">
						<img src="img/master/ylf.jpg" alt="" />
					</a>
					<p>于林峰</p>
				</li>
				<li>
					<a href="http://c71_dongxin.houdunphp.com/">
						<img src="img/master/dx.jpg" alt="" />
					</a>
					<p>董鑫</p>
				</li>
				<li>
					<a href="http://lihuangang.houdunphp.com/">
						<img src="img/master/lhg.jpg" alt="" />
					</a>
					<p>李环岗</p>
				</li>
				<li>
					<a href="http://c71_gaoming.houdunphp.com/">
						<img src="img/master/gm.jpg" alt="" />
					</a>
					<p>高明</p>
				</li>
				<li>
					<a href="http://c71_songlinbo.houdunphp.com/">
						<img src="img/master/slb.jpg" alt="" />
					</a>
					<p>宋林博</p>
				</li>
			</ul>
		</div>
		
		<!--返回头部-->
		<div class="footer_top">
			<a href="#">
				<img src="img/top.jpg" alt="" title="返回顶部"/>
			</a>
		</div>
		
		<!--底部-->
		<div class="footer">
			<div>
				<p class="end">End 到底了亲！</p>
				<p class="git">代码码云地址：https://git.oschina.net/guyelinfeng/new_resume.git</p>
			</div>
		</div>
	</body>
</html>
